<template>
  <div class="content">
    <div>
      <Header />
    </div>
    <div class="login-content">
      <div class="login-inner">
        <div class="login">
          <MainForm />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
// import Background from "./background.png";
import Header from "./header";
import MainForm from "./main";
import Footer from "./footer";
export default {
  name: "login",
  components: {
    Header,
    MainForm,
    Footer,
  },
  data() {
    return {
      title: "知乎登陆页面",
    };
  },
};
</script>

<style lang = "scss" scoped>
.login {
  position: relative;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
/* .content {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  border-radius: 2px;
  background-color: #ffffff;
  width: 400px;
  overflow: hidden;
} */
.login-content {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  border-radius: 2px;
  background-color: #ffffff;
  width: 400px;
  overflow: hidden;
}
.login-inner {
  position: relative;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
</style>
